import { Menu } from 'antd';
import { useEffect, useState } from 'react';
import { LoginOutlined } from '@ant-design/icons';
import { history, Link } from 'umi';
import routerConfig from '../../config/routes';
import styles from './index.less'

const Header = (props) => {
  const [items, setItems] = useState([]);
  const [current, setCurrent] = useState(['1']);
  useEffect(() => {
    const items = routerConfig[1].routes.filter((item) => !!item.menuShow);

    setItems(items);

    const pathname = history.location.pathname;
    setCurrent([pathname]);

    // const unlisten = history.listen((location, action) => {
    //     console.log(location.pathname, '---pathss');
    //     setCurrent([location.pathname])
    // });
    // unlisten();
  }, []);
  const renderRouterMenu = (list) => {
    let result = [];
    list.map((item) => {
      if (item?.routes?.length > 0) {
        result = result.concat(renderRouterMenu(item.routes));
      } else {
        result.push(item);
      }
    });
    return result;
  };
  const onClick = (e) => {
    setCurrent(e.key);
  };
  return (
    <div className={styles.menu_wrap}>
      <Menu
        theme="dark"
        mode="horizontal"
        onClick={onClick}
        selectedKeys={current}
      >
        {items.map((item, index) => (
          <Menu.Item key={`${item.path}`}>
            <Link to={item.path} className="nav-text">
              {item.title}
            </Link>
          </Menu.Item>
        ))}
      </Menu>
      <div className={styles.user_wrap}>
          <span>{props.userInfo.accountname || ''}</span>
          <span onClick={props.LoginOut}><LoginOutlined />&nbsp;退出</span>
      </div>
    </div>
   
  );
};

export default Header;
